<template>
  <!-- 书架 -->
  <div class="bookrack">
    <div class="top">
      <img src="@/assets/img/icons/black/back.svg" class="back" @click="$router.back()" />
      <div class="title">我的书架</div>
      <div class="placeorder"></div>
    </div>
    <div class="info-box">
      <div class="read-time">
        今日已读<span style="margin-left: 0.03rem; margin-right: 0.03rem">{{ Math.floor(todayreadseconds / 60) }}</span
        >分钟
      </div>
      <div class="maxbooks">
        当前书架上限<span style="margin-left: 0.03rem">{{ nowBooks }}/{{ maxBooks }}</span>
      </div>
    </div>
    <k-scroll
      class="scroll"
      topColor="var(--main-background-color)"
      bottomColor="var(--main-background-color)"
      topType="stretch"
      bottomType="stretch"
    >
      <div class="content">
        <div class="book-item" v-for="item in bookList" :key="JSON.stringify(item)" @click="itemClick(item.name, item.author)">
          <img class="image" v-lazy="item.img" />
          <div class="name">{{ item.name }}</div>
          <div class="author">{{ item.author }}</div>
          <div v-show="item.status == '更新'" class="status1">{{ item.status }}</div>
          <div v-show="item.status == '完结'" class="status2">{{ item.status }}</div>
        </div>
        <div v-if="maxBooks > nowBooks" class="add" @click="$router.push('/search')">
          <img class="add-icon" src="@/assets/img/icons/black/add.svg" />
        </div>
      </div>
    </k-scroll>
  </div>
</template>

<script>
export default {
  name: 'bookrack',
  data() {
    return {
      //最大书籍数量
      maxBooks: this.$store.state.userInfo.maxbookrack,
      //目前藏书数量
      nowBooks: JSON.parse(this.$store.state.userInfo.bookrack).length,
      //今日阅读秒数
      todayreadseconds: this.$store.state.userInfo.todayreadseconds,
      //书架书籍书籍
      bookList: [
        {
          name: '武神主宰', //小说名字
          author: '暗魔师', //小说作者
          img: require('@/assets/img/other/wszz.jpg'), //小说封面
          status: '更新', //小说状态
        },
        {
          name: '完美世界', //小说名字
          author: '辰东', //小说作者
          img: require('@/assets/img/other/wmsj.jpg'), //小说封面
          status: '完结', //小说状态
        },
        {
          name: '斗罗大陆', //小说名字
          author: '唐家三少', //小说作者
          img: require('@/assets/img/other/dldl.jpg'), //小说封面
          status: '完结', //小说状态
        },
        {
          name: '斗破苍穹', //小说名字
          author: '天蚕土豆', //小说作者
          img: require('@/assets/img/other/dpcq.jpg'), //小说封面
          status: '完结', //小说状态
        },
        {
          name: '一念永恒', //小说名字
          author: '耳根', //小说作者
          img: require('@/assets/img/other/ynyh.jpg'), //小说封面
          status: '更新', //小说状态
        },
      ],
    }
  },
  methods: {
    //进入某本书
    itemClick(name, author) {
      this.$router.push({
        path: '/read',
        query: { name, author },
      })
    },
  },
}
</script>

<style scoped src="./index.css"></style>
